<template>
  <div class="main">
    <div class="container">
      <div class="left-box">
        <div class="navbar">
          <div class="title">
            排行榜
          </div>
          <div class="nav">
            <div :class="{'active': rankType === 1 }" class="item" @click="visitRank">点击榜</div>
            <div :class="{'active': rankType === 2 }" class="item" @click="newestRank">新书榜</div>
            <div :class="{'active': rankType === 3 }" class="item" @click="updateRank">更新榜</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="content">
          <el-table :data="books" :header-cell-style="{color: 'red', 'textAlign': 'left' }" :show-overflow-tooltip="true"
                    style="width: 90%;height: 80vh;margin: 0 auto">
            <el-table-column fixed label="排名" width="60">
              <template #default="scope">
                <span :class="'i-'+Number(scope.$index + 1)">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed label="类别" width="100">
              <template #default="scope">
                <div class="hover" @click="bookDetail(scope.row.id)">{{ scope.row.categoryName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="书名" width="200">
              <template #default="scope">
                <div class="hover" @click="bookDetail(scope.row.id)">{{ scope.row.bookName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="最新章节" width="200">
              <template #default="scope">
                <div class="hover" @click="bookDetail(scope.row.id)">{{ scope.row.lastChapterName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="作者" width="100">
              <template #default="scope">
                <div>{{ scope.row.authorName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="字数">
              <template #default="scope">
                <div>{{ wordCountFormat(scope.row.wordCount) }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter, useRoute} from "vue-router";
import {listVisitRankBooks, listUpdateRankBooks, listNewestRankBooks,} from "@/api/book";
import {onMounted, reactive, ref, toRefs} from "vue";
import emitter from "@/utils/bus";

const activeIndex = ref('visitRank')
const route = useRoute();
const router = useRouter();
const state = reactive({
  books: [],
  rankName: "点击榜",
  rankType: 1
});
const {books, rankName, rankType} = toRefs(state);
onMounted(async () => {
      await visitRank();
    }
);

const visitRank = async () => {
  const {data} = await listVisitRankBooks();
  state.books = data;
  state.rankName = "点击榜";
  state.rankType = 1;
};

const newestRank = async () => {
  const {data} = await listNewestRankBooks();
  state.books = data;
  state.rankName = "新书榜";
  state.rankType = 2;
};

const updateRank = async () => {
  const {data} = await listUpdateRankBooks();
  state.books = data;
  state.rankName = "更新榜";
  state.rankType = 3;
};

const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};

const wordCountFormat = (count: number) => {
  if (count > 50000) {
    return count / 10000 + "万";
  }
  if (count > 4000) {
    return count / 1000 + "千";
  }
  return count;
};


</script>

<style>
.main {
  background-color: #F5F5F5;

  .container {
    display: flex;
    justify-content: space-between;
    text-align: center;
    background-color: #F5F5F5;
    width: 60%;
    margin: 0 auto;

    .left-box {
      //border: 1px solid red;
      flex: 1;
      padding: 10px;
      box-sizing: border-box;

      .navbar {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        color: black;

        .title {
          font-size: 30px;
          font-weight: bold;
          padding: 10px;

        }

        .nav {
          display: flex;
          flex-direction: column;
          padding: 0 40px;

          .item.active {
            color: red; /* 或者添加你想要的激活样式，例如背景色或字体颜色等 */
          }

          .item {
            padding: 20px;
            cursor: pointer;

            &:hover {
              color: #fc7403;
            }
          }

          .item:nth-child(1), .item:nth-child(2) {
            border-bottom: 1px solid #ddd;
          }
        }
      }

    }

    .right-box {
      flex: 3;
      //border: 1px solid black;
      padding: 10px;
      box-sizing: border-box;

      .content {
        background-color: #fff;
        text-align: center;

        .el-table__row .cell span {
          display: block;
          background-color: #989898;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: #FFFFFF;
        }

        .el-table__row .cell .i-1 {
          background-color: #F66C23;
        }

        .el-table__row .cell .i-2 {
          background-color: #F98D28;
        }

        .el-table__row .cell .i-3 {
          background-color: #FBA362;
        }

        .hover {
          &:hover {
            color: #FA7C32;
            cursor: pointer;

          }
        }

      }
    }
  }

}
</style>
